<template>
	<view class="travel-card-main" @touchstart="touchStart" @touchmove="touchMove">
		<view class="card-rank-main">
			<!-- 周榜 -->
			<view class="zhou-bang-card"
				:style="{ backgroundImage: `url(${weekRankList[0].bg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }"
				v-if="weekRankList.length ">
				<view class="title-icon" @click="refreshRank">
					<view>
						<uni-icons type="reload" size="20" color="#fff"></uni-icons>
					</view>
					<view class="rank-title">
						{{items[0]}}
					</view>
					<view class="desc-icon" @click="descriptionPop">
						<image src="@/static/icons/card/desc-info.png" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 前三名 -->
				<view class="rank-front-three">
					<view class="second-view"
						:style="{ backgroundImage: `url(${weekRankList[1].bg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
						<view class="second-avatar" @click="toUserCardHistoryPage(weekRankList[1])">
							<image :src="weekRankList[1].userAvatar" mode="aspectFill"></image>
						</view>
					</view>
					<view class="first-view"
						:style="{ backgroundImage: `url(${weekRankList[0].bg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
						<view class="second-avatar" @click="toUserCardHistoryPage(weekRankList[0])">
							<image :src="weekRankList[0].userAvatar" mode="aspectFill"></image>
						</view>
					</view>
					<view class="third-view"
						:style="{ backgroundImage: `url(${weekRankList[2].bg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
						<view class="second-avatar" @click="toUserCardHistoryPage(weekRankList[2])">
							<image :src="weekRankList[2].userAvatar" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- 前50名 -->
				<view class="rank-fivity">
					<view class="other-rank">
						<view class="rank-item" v-for="(item,index) in weekRankList.slice(3)" :key="index">
							<view class="rank-num">
								{{item.rank}}
							</view>
							<view class="avatar-name" @click="toUserCardHistoryPage(item)">
								<view class="rank-user-avatar">
									<image :src="item.userAvatar" mode="aspectFill"></image>
								</view>
								<view class="rank-username">
									{{item.userName}}
								</view>
							</view>
							<view class="rank-record">
								{{item.records}}
							</view>
						</view>
					</view>
					<view class="my-rank">
						<view class="rank-num">
							{{myRank.rank}}
						</view>
						<view class="avatar-name" @click="toUserCardHistoryPage(myRank)">
							<view class="rank-user-avatar">
								<image :src="myRank.userAvatar" mode="aspectFill"></image>
							</view>
							<view class="rank-username">
								{{myRank.userName}}
							</view>
						</view>
						<view class="rank-record">
							{{myRank.records}}
						</view>
					</view>
				</view>
			</view>
			<!-- 总榜 -->
			<view class="zhou-bang-card zong-bang"
				:style="{ backgroundImage: `url(${AllrankList[0].bg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }"
				v-if="AllrankList.length > 3">
				<view class="title-icon">
					<view @click="refreshRank">
						<uni-icons type="reload" size="20" color="#fff"></uni-icons>
					</view>
					<view class="rank-title">
						{{items[1]}}
					</view>
					<view class="desc-icon" @click="descriptionPop">
						<image src="@/static/icons/card/desc-info.png" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 前三名 -->
				<view class="rank-front-three">
					<view class="second-view"
						:style="{ backgroundImage: `url(${AllrankList[1].bg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
						<view class="second-avatar" @click="toUserCardHistoryPage(AllrankList[1])">
							<image :src="AllrankList[1].userAvatar" mode="aspectFill"></image>
						</view>
					</view>
					<view class="first-view"
						:style="{ backgroundImage: `url(${AllrankList[0].bg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
						<view class="second-avatar" @click="toUserCardHistoryPage(AllrankList[0])">
							<image :src="AllrankList[0].userAvatar" mode="aspectFill"></image>
						</view>
					</view>
					<view class="third-view"
						:style="{ backgroundImage: `url(${AllrankList[2].bg})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
						<view class="second-avatar" @click="toUserCardHistoryPage(AllrankList[2])">
							<image :src="AllrankList[2].userAvatar" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- 前50名 -->
				<view class="rank-fivity">
					<view class="other-rank">
						<view class="rank-item" v-for="(item,index) in AllrankList.slice(3)" :key="index">
							<view class="rank-num">
								{{item.rank}}
							</view>
							<view class="avatar-name" @click="toUserCardHistoryPage(item)">
								<view class="rank-user-avatar">
									<image :src="item.userAvatar" mode="aspectFill"></image>
								</view>
								<view class="rank-username">
									{{item.userName}}
								</view>
							</view>
							<view class="rank-record">
								{{item.records}}
							</view>
						</view>
					</view>
					<view class="my-rank">
						<view class="rank-num">
							{{myAllRank.rank}}
						</view>
						<view class="avatar-name" @click="toUserCardHistoryPage(myAllRank)">
							<view class="rank-user-avatar">
								<image :src="myAllRank.userAvatar" mode="aspectFill"></image>
							</view>
							<view class="rank-username">
								{{myAllRank.userName}}
							</view>
						</view>
						<view class="rank-record">
							{{myAllRank.records}}
						</view>
					</view>
				</view>
			</view>
			<view class="yu-liu"></view>
		</view>

		<view class="dots-diector">
			<view class="week-dots-diector" :style="{ backgroundColor: current === 0? '#66596b' : '#e5e5e5' }"
				@click.stop="switchToWeekRank"></view>
			<view class="all-dots-diector" :style="{ backgroundColor: current === 1? '#66596b' : '#e5e5e5' }"
				@click.stop="switchToAllRank"></view>
		</view>

		<uni-popup ref="rulesPupop" type="center" border-radius="10px 10px 10px 10px">
			<view class="rules-popup">
				<view class="title-desc-content">
					<view class="desc-title">
						打卡说明
					</view>
					<view class="card-desc">
						<view class="card-desc-item" v-for="(item,index) in cardDescList" :key="index">
							{{item}}
						</view>
					</view>
				</view>
				<view class="desc-confirm-btn" @click="closeDescPop">
					<button type="default">好的</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import mitter from '@/common/mitt/eventBus.js';
	import {
		getAllRankInfo
	} from '@/request/card.js';
	export default {
		data() {
			return {
				myRank: {
					userAid: 1,
					rank: 8,
					userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					userName: '疆屿用户38294',
					records: 234
				}, // 我的排名信息(周榜)
				myAllRank: {
					userAid: 1,
					rank: 4,
					userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
					userName: '紫薯芋泥',
					records: 9445
				}, // 我的排名信息(总榜)
				cardDescList: [
					'1.在20公里范围内的重复打卡无效。',
					'2.打卡需要获取位置权限。',
					'3.每次成功打卡即可获得10积分。',
					'4.每周会更新一次周榜，总榜实时更新。',
					'5.点击打卡记录即可查看自己去过的地方。'
				], // 说明
				items: ['周榜', '总榜'],
				current: 0,
				startX: 0, // 用于存储触摸开始位置
				AllrankList: [{
						userAid: 1,
						rank: 1,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://b0.bdstatic.com/5b31e7788487448be3cd528211a9f435.jpg@h_1280'
					},
					{
						userAid: 2,
						rank: 2,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img1.baidu.com/it/u=1877419501,1823077687&fm=253&fmt=auto?w=500&h=500'
					},
					{
						userAid: 3,
						rank: 3,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=3137326520,1268210035&fm=253&fmt=auto?w=1140&h=800'
					},
					{
						userAid: 4,
						rank: 4,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 5,
						rank: 5,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 6,
						rank: 6,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 7,
						rank: 7,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 8,
						rank: 8,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 9,
						rank: 9,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 10,
						rank: 10,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 11,
						rank: 11,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
				],
				weekRankList: [{
						userAid: 1,
						rank: 1,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户382',
						records: 234,
						bg: 'https://img1.baidu.com/it/u=294343947,677787358&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422',
					},
					{
						userAid: 2,
						rank: 2,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img0.baidu.com/it/u=2965979580,3860472413&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=839'
					},
					{
						userAid: 3,
						rank: 3,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 4,
						rank: 4,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 5,
						rank: 5,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 6,
						rank: 6,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38',
						records: 23422,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 5,
						rank: 5,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 6,
						rank: 6,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38',
						records: 23422,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 5,
						rank: 5,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38294',
						records: 234,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					},
					{
						userAid: 6,
						rank: 6,
						userAvatar: 'https://img1.baidu.com/it/u=473320135,2873907253&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
						userName: '疆屿用户38',
						records: 23422,
						bg: 'https://img2.baidu.com/it/u=1960431109,2085729836&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422'
					}
				]
			};
		},

		mounted() {
			// 使用mitter通知右上角的三个点隐藏，显示打卡图标
			mitter.emit('threeDotShow', true);

			// uni.hideTabBar(); // 调用方法隐藏tabBar
			// 获取所有排名信息
			this.getAllRankInfoFunc();
		},
		beforeDestroy() {
			console.log("旅行卡页面关闭了");
			// 使用mitter通知右上角的三个点隐藏，显示打卡图标
			// mitter.emit('threeDotShow', false);
		},
		onUnload() {
			console.log('页面卸载');
			// 执行清理操作
		},

		methods: {

			// 获取所有排名信息
			getAllRankInfoFunc() {
				getAllRankInfo().then(res => {
					// console.log(res);
					this.myAllRank = res.data.data.myAllRank;
					this.myRank = res.data.data.myRank;
					this.AllrankList = res.data.data.AllrankList;
					this.weekRankList = res.data.data.weekRankList;
					if(this.AllrankList.length <= 3 || this.weekRankList.length <= 3){
						uni.showToast({
							title: '暂无数据，先去打个卡吧',
							icon: 'none',
							duration: 3000
						})
					}
				}).catch(err=>{
					uni.showToast({
						title: '获取失败！',
						icon: 'none'
					})
				})
			},
			
			// 刷新排名
			refreshRank(){
				this.getAllRankInfoFunc();
				uni.showToast({
					title: '刷新成功',
					icon: 'none'
				})
			},

			// 点击说明弹出（规则）
			descriptionPop() {
				this.$refs.rulesPupop.open();
			},

			// 点击好的按钮关闭弹窗
			closeDescPop() {
				this.$refs.rulesPupop.close();
			},

			// 去打卡页面
			toTakeCardPage() {
				uni.navigateTo({
					url: '/pages/tabBar/component/topBar/card/punchClockPage'
				})
			},

			// 去打卡记录页面
			toUserCardHistoryPage(item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/tabBar/component/topBar/card/cardHistoryPage?userAid=${item.userAid}`
				})
			},

			switchToWeekRank() {
				this.current = 0;
			},
			switchToAllRank() {
				this.current = 1;
			},
			touchStart(event) {
				this.startX = event.touches[0].clientX;
			},
			touchMove(event) {
				const endX = event.touches[0].clientX;
				const deltaX = endX - this.startX;
				if (deltaX < -50) {
					// 左滑超过 300
					this.current = 1;
				} else if (deltaX > 50) {
					// 右滑超过 300
					this.current = 0;
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.travel-card-main {
		padding-top: 20px;
		width: 100%;
		height: auto;
		padding-top: 10px;
		position: relative;
		// padding-bottom: 10px;

		// background-color: #55aa7f;
		.card-rank-main {
			padding-top: 20px;
			width: 100%;
			height: 80vh;
			overflow-x: scroll;
			display: flex;
			flex-wrap: nowrap;
			// background-color: #ffaa7f;

			.zhou-bang-card {
				margin-top: 50px;
				width: 90vw;
				height: 70vh;
				margin-left: 5vw;
				margin-right: 5vw;
				border-radius: 25px;
				box-shadow: 5px 0 10px 5px rgba(112, 112, 112, 0.5);
				flex-shrink: 0;
				/* 防止元素在空间不足时收缩 */
				box-sizing: border-box;
				/* 使宽度包含 padding 和 border */
				position: relative;

				.title-icon {
					margin-top: 16px;
					display: flex;
					justify-content: space-between;
					width: 90%;
					align-items: center;
					margin-left: auto;
					margin-right: auto;

					.rank-title {
						color: #fff;
						font-size: 24px;
						font-weight: bold;
						// background-color: #66596b;
						// margin-left: 30px;
					}

					.desc-icon {
						image {
							width: 18px;
							height: 18px;
						}
					}
				}

				.rank-front-three {
					height: 100px;
					margin-top: 20px;
					display: flex;
					width: 90%;
					margin-left: auto;
					margin-right: auto;
					align-items: center;
					justify-content: space-between;
					// background-color: #66596b;

					.second-view {
						width: 75px;
						height: 75px;
						border-radius: 20px;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.6);

						.second-avatar {
							image {
								width: 50px;
								height: 50px;
								border-radius: 50%;
							}
						}
					}

					.first-view {
						width: 90px;
						height: 90px;
						border-radius: 20px;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.6);

						.second-avatar {
							image {
								width: 60px;
								height: 60px;
								border-radius: 50%;
							}
						}
					}

					.third-view {
						width: 75px;
						height: 75px;
						border-radius: 20px;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.6);

						.second-avatar {
							image {
								width: 50px;
								height: 50px;
								border-radius: 50%;
							}
						}
					}
				}

				.rank-fivity {
					// width: 90%;
					// margin-left: auto;
					// margin-right: auto;
					margin-top: 20px;
					// background-color: #66596b;
					height: calc(70vh - 490rpx);
					overflow-y: scroll;

					.other-rank {
						.rank-item {
							height: 50px;
							width: 100%;
							display: flex;
							justify-content: space-evenly;
							align-items: center;
							background-color: rgba(102, 89, 91, 0.4);
							margin-bottom: 12px;

							.rank-num {
								width: 30px;
								font-size: 20px;
								color: #FFFFFF;
								// background-color: #66596b;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.avatar-name {
								width: 180px;
								display: flex;
								align-items: center;

								// background-color: #66596b;
								// overflow: hidden;
								.rank-user-avatar {
									display: flex;
									align-items: center;

									image {
										width: 45px;
										height: 45px;
										border-radius: 50%;
									}
								}

								.rank-username {
									margin-left: 10px;
									font-size: 14px;
									color: #FFFFFF;
								}
							}

							.rank-record {
								width: 60px;
								// background-color: #66596b;
								overflow: scroll;
								color: #FFFFFF;
								font-weight: bold;
								font-size: 18px;
								text-align: center;
							}
						}
					}

					.my-rank {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						background-color: rgba(102, 89, 91, 0.7);

						border-radius: 0 0 25px 25px;

						.rank-num {
							width: 30px;
							font-size: 20px;
							color: #FFFFFF;
							// background-color: #66596b;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.avatar-name {
							width: 180px;
							display: flex;
							align-items: center;

							// background-color: #66596b;
							// overflow: hidden;
							.rank-user-avatar {
								image {
									width: 45px;
									height: 45px;
									border-radius: 50%;
								}
							}

							.rank-username {
								margin-left: 10px;
								font-size: 14px;
								color: #FFFFFF;
							}
						}

						.rank-record {
							width: 60px;
							// background-color: #66596b;
							overflow: scroll;
							color: #FFFFFF;
							font-weight: bold;
							font-size: 18px;
							text-align: center;
						}
					}
				}
			}

			.yu-liu {
				// 给卡片最后边预留的空白空间
				margin-top: 50px;
				// margin-left: 10px;
				width: 1px;
				height: 70vh;
				background-color: #fff;
				flex-shrink: 0;
				/* 防止元素在空间不足时收缩 */
				box-sizing: border-box;
				/* 使宽度包含 padding 和 border */
			}
		}

		.dots-diector {
			width: 50px;
			height: 30px;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: absolute;
			bottom: -10px;
			left: 0;
			right: 0;
			margin: auto;

			.week-dots-diector {
				width: 20px;
				height: 3px;
				// background-color: #e5e5e5;
			}

			.all-dots-diector {
				width: 20px;
				height: 3px;
				// background-color: #66596b;
			}
		}

		.rules-popup {
			width: 60vw;
			height: 40vh;
			border-radius: 10px 10px 10px 10px;
			box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.6);
			background-color: #fff;
			margin-top: 250rpx;
			padding: 25rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title-desc-content {
				.desc-title {
					padding-top: 5rpx;
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
				}

				.card-desc {
					margin-top: 30rpx;
				}
			}

			.desc-confirm-btn {
				button {
					border-radius: 40rpx;
					background-color: #66596b;
					display: flex;
					align-items: center;
					justify-content: center;
					letter-spacing: 3rpx;
					color: #fff;
				}
			}
		}
	}
</style>